<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { dayjs } from 'element-plus'
import user2Img from '@/imgs/user2.png'
import Chart from './chart.vue'

const props = defineProps({
	messages: {
		type: Array,
		default: () => [],
	},
	userAvatar: {
		type: String,
		default: '',
	},
	isHistory: {
		type: Boolean,
		default: false,
	},
	isLoadingMode: {
		type: Boolean,
		default: false,
	},
})

const currentTime = ref('')

onMounted(() => {
	currentTime.value = dayjs().format('YYYY-MM-DD HH:mm:ss')
})
</script>
<template>
	<div v-if="isLoadingMode" id="aa">
		<div class="message-item loading-mode">
			<img class="message-avatar" src="@/imgs/robot-logo.png" />
			<div class="message-detail">
				<div class="message-time">{{ currentTime }}</div>
				<div class="message-wrap">
					<div>
						<div class="message-text">思考中...</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div v-else id="bb">
		<div
			v-for="(message, index) in messages"
			:key="index"
			:class="message.isUser ? 'message-item user' : 'message-item'"
		>
			<img class="message-avatar" v-if="!message.isUser" src="@/imgs/robot-logo.png" />
			<div class="message-detail">
				<div class="message-time">{{ message.time }}</div>
				<div class="message-wrap">
					<div v-for="(item, i) in message.list" :key="i">
						<div class="message-text" v-if="item.type == 'text'" v-html="item.content"></div>
						<div class="message-text">
							<span class="cursor"></span>
						</div>
						<div class="message-audio" v-if="item.type == 'audio' && !isHistory">
							<audio :src="item.content" controls ref="audio" controlslist="noplaybackrate nodownload"></audio>
						</div>
						<div class="message-text" v-if="item.type == 'chart'">
							<Chart :chartData="item.content"></Chart>
						</div>
					</div>
				</div>
			</div>
			<img class="message-avatar" v-if="message.isUser" :src="userAvatar || user2Img" />
		</div>
		<div class="histroy-tips" v-if="isHistory && messages?.length">以上为历史会话记录</div>
	</div>
</template>
<style scoped lang="scss">
.message-item {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto 24px;
	&.loading-mode {
		.message-text {
			white-space: nowrap; /* 不换行 */
			overflow: hidden; /* 超出部分隐藏 */
			position: relative;
		}
		.message-text::after {
			display: inline-block;
			width: 16px;
			content: '......'; /* 添加省略号 */
			animation: ellipsisAnimation 2s infinite linear; /* 应用动画效果 */
		}

		@keyframes ellipsisAnimation {
			0% {
				content: '.';
			}
			20% {
				content: '..';
			}
			40% {
				content: '...';
			}
			60% {
				content: '....';
			}
			80% {
				content: '.....';
			}
			100% {
				content: '.';
			}
		}
	}
	.message-avatar {
		width: 40px;
		height: 40px;
		margin: 0 12px 12px 18px;
		border-radius: 50%;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
	}
	.message-detail {
		width: calc(100% - 90px);
		// max-width: 640px;
		max-width: 840px;
		.message-time {
			font-size: 12px;
			color: #bbb;
		}
		.message-wrap {
			margin-top: 6px;
			background-color: rgb(249, 249, 249);
			//   border: 1px solid #f0f0f0;
			border-radius: 8px;
			padding: 8px;
			color: #000;
			width: max-content;
			max-width: 100%;
			min-width: 33px;
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
			min-height: 33px;

			.message-text {
				// margin: 6px;
				line-height: 1.2rem;
				word-wrap: break-word;
				overflow-wrap: break-word;
				.cursor {
					display: inline-block;
					width: 12px;
					height: 12px;
					border-radius: 100%;
					// background-color: black;
					background: linear-gradient(90deg, #f06966, #fad6a6);
					animation: blink 1s step-end infinite;
				}
				pre {
					white-space: normal;
				}
				@keyframes blink {
					from,
					to {
						background-color: #f06966;
					}
					50% {
						background-color: #fad6a6;
					}
				}
			}
			.message-audio {
				font-size: 0;
				audio {
					max-width: 100%;
					height: 40px;
					border-radius: 8px;
				}
			}
			.message-image img {
				margin: 6px;
				max-width: 100%;
			}
			.message-code {
				margin: 6px;
				font-family: monospace;
				.hljs {
					background-color: #fff;
					border-radius: 8px;
					line-height: 1.5;
				}
			}
			.message-markdown {
				margin: 6px;
				overflow-x: auto;
				background-color: #fff;
				padding: 12px;
			}
			.message-link {
				margin: 6px;
				a {
					color: blue;
				}
			}
		}
	}
	&.user {
		justify-content: flex-end;
		.message-detail {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
		}
		.message-wrap {
			background-color: rgb(227, 235, 255);
			//   border-color: rgb(227, 235, 255);
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
		}
		.message-avatar {
			margin: 0px 18px 12px 12px;
		}
	}
}
.histroy-tips {
	width: 100%;
	text-align: center;
	font-size: 12px;
	color: #adadad;
	margin: 24px 0;
	position: relative;
	&::before,
	&::after {
		position: absolute;
		top: 50%;
		content: '';
		width: calc(50% - 140px);
		max-width: 460px;
		height: 0px;
		border-top: 1px solid #f0f0f0;
	}
	&::before {
		right: calc(50% + 60px);
	}
	&::after {
		left: calc(50% + 60px);
	}
}
</style>
